<script setup lang="ts">
import { defineComponent, onMounted } from 'vue';
import createDefaultBpmnXml from '../../bpmn/defaultBpmnXml';
import activitiModdel from '../../bpmn/resources/activiti-moddel1.json';
import translate from '../../bpmn/i18n';
import { BpmnStore } from '@/components/bpmn-process-designer/bpmn/store';
import { useBpmnData } from '@/store/modules/bpmnData';
import { storeToRefs } from 'pinia';

defineProps({
  xmlDate: {
    type: String,
    default: ''
  }
});

const bpmnDataStore = useBpmnData();
let { xmlData } = storeToRefs(bpmnDataStore);
const bpmnContext = BpmnStore;

onMounted(() => {
  bpmnInit();
});

function bpmnInit() {
  bpmnContext.initModeler({
    container: '#modeler-container',
    additionalModules: [
      //添加翻译
      { translate: ['value', translate('zh')] }
    ],
    moddleExtensions: {
      activiti: activitiModdel
    }
  });
  const defaultProcessIdAndName = '1';
  if (
    xmlData.value === '' ||
    xmlData.value === null ||
    xmlData.value === undefined
  ) {
    bpmnContext
      .importXML(
        createDefaultBpmnXml(defaultProcessIdAndName, defaultProcessIdAndName)
      )
      .then((result: Array<string>) => {
        if (result.length) {
          console.warn('importSuccess warnings', result);
        }
      })
      .catch((err: any) => {
        console.warn('importFail errors ', err);
      });
  } else {
    bpmnContext
      .importXML(xmlData.value)
      .then((result: Array<string>) => {
        if (result.length) {
          console.warn('importSuccess warnings', result);
        }
      })
      .catch((err: any) => {
        console.warn('importFail errors ', err);
      });
  }
}
</script>

<template>
  <div id="modeler-container" />
</template>

<style scoped lang="scss">
//:deep(.bjs-powered-by) {
//  display: block;
//}

:deep(.bpmn-container) {
  height: 100%;
}

#modeler-container {
  flex: 1;
  height: 100%;
  position: relative;
  background: url('')
    repeat !important;
}

:deep(.djs-palette) {
  display: none;
  border: none !important;
  background-color: #fff !important;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
  top: 65px !important;
}
</style>
